<template>
  <div>
    <!--      表格位置-->
    <div class="button-table-box" v-loading="isLoading">
      <div class="info-in-box">
        <span class="title">分类名：</span>
        <el-input clearable @change="getCategoryList()"  placeholder="输入分类名称" v-model="searchProduct" style="width: 15%"></el-input>
        <el-button type="primary" size="mini" style="margin-left: 30px;" @click="getCategoryList">查询</el-button>
      </div>
      <div class="button-box" style="margin-top: 20px;">
        <el-button type="primary"  size="small" icon="el-icon-circle-plus"  class="add-button" @click="dialogFormVisible = true">添加</el-button>
      </div>
      <table-list :tableAllData="tableAllData" @getTableData="getTableData" ref="tableList"></table-list>
    </div>
    <!--     添加产品弹出框-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" width="35%"  @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="分类名称：" label-width="120px">
          <el-input v-model="submitForm.name" clearable placeholder="请输入分类名称" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="详情：" label-width="120px">
          <el-input v-model="submitForm.description" clearable placeholder="请输入详情" style="width: 70%;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button @click="addCategory" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!--     修改出诊计划弹出框-->
    <el-dialog title="修改" :visible.sync="updateDialog" width="35%"  @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="分类名称：" label-width="120px">
          <el-input v-model="updateForm.name" clearable placeholder="请输入分类名称" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="详情：" label-width="120px">
          <el-input v-model="updateForm.description"  clearable placeholder="请输入详情" style="width: 70%;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="updateCategory">确 定</el-button>
      </div>
    </el-dialog>
    <page-pagination :page-list="pageList" ref="pagePagination"></page-pagination>
    <!--    用作删除的弹框-->
    <delete-dialog :dialog="deleteDialog" ref="deleteDialog"></delete-dialog>
  </div>
</template>


<script>
import {tips} from "@/common/js/optionTips";
import {
  addCategory, deleteCategory,
  queryProductCategory, updateCategory, updateProduct,

} from "@/api/product";

export default {
  name: "addProduct",
  data() {
    return {
      submitForm:{
        id:'',
        name:'',
        description:'',
      },
      updateForm:{
        id:'',
        name:'',
        description:'',
      },
      // 添加模态框的
      dialogFormVisible: false,
      // 修改模态框的
      updateDialog: false,
      selectDoctorID: '',
      // 顶部筛选信息
      isLoading: false,
      searchProduct: '',
      status: '上架',
      statusOptions: [
        {
          value: '上架',
          label: '上架'
        }, {
          value: '下架',
          label: '下架'
        }],
      // 表格数据
      tableAllData: {
        dataNull: false,
        tableTitle: [{
          prop: 'id',
          label: '分类ID',
          width: '100',
          option: ''
        }, {
          prop: 'name',
          label: '分类名',
          width: '300',
          option: ''
        },
          {
            prop: 'description',
            label: '描述',
            width: '400',
            option: ''
          }],
        tableData: [],
        option: {
          width: '150',
          button: [
            {
              size: 'mini',
              type: 'success',
              name: '编辑'
            },
            {
              size: 'mini',
              type: 'danger',
              name: '删除'
            }
          ]
        }
      },
      // 底部分页的数据
      pageList: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      // 删除的模态框的数据
      deleteDialog: {
        title: '分类',
        dialogFormVisible: false,
        id: ''
      },
      deleteScope: {}, // 用作当从组件传过来确认删除时用的
    }
  },
  methods: {
    initPage:function (){
      this.pageList.pageNum = 1;
      this.pageList.pageSize = 10;
    },
    // 关闭模态框
    cancelModal: function () {
      this.dialogFormVisible = false;
      this.updateDialog = false;
      this.submitForm.name = '';
      this.submitForm.description = '';
    },

    // 获取表格的点击按钮的信息反馈
    getTableData: function (option) {
      if (option.buttonName === '编辑') {
        this.updateDialog = true;
        this.updateForm.id = option.scopeRow.id
        this.updateForm.name = option.scopeRow.name;
        this.updateForm.description = option.scopeRow.description;
      } else if (option.buttonName === '删除') {
        this.deleteScope = option; // 将删除的数据存起来
        this.deleteDialog.dialogFormVisible = true; // 打开删除弹窗
        this.deleteDialog.isProduct = true;
        this.deleteDialog.id = option.scopeRow.name; // 发送删除id
      }
    },
    // 用户点击删除某条产品信息
    deleteProduct: function () {
      deleteCategory(this.deleteScope.scopeRow.id).then(res => {
        if (res.code === 200) {
          this.deleteDialog.dialogFormVisible = false;
          this.$refs.tableList.deleteData(this.deleteScope.scopeIndex)
        }
      }).catch(() => {
        this.deleteDialog.dialogFormVisible = false;
        tips('error', '该分类下还有产品')
      });
    },
    // 获取分类
    getCategoryList:function (){
      let that = this
      queryProductCategory(this.pageList.pageNum,this.pageList.pageSize,this.searchProduct).then(res => {
        this.tableAllData.tableData = [];
        if(res.code === 200){
          this.pageList = {
            pageNum: res.data.current,
            pageSize: res.data.size,
            total: res.data.total
          };
          if(res.data.records.length > 0){
            res.data.records.forEach(function (item,index){
              that.tableAllData.tableData.push({
                id:item.id,
                name:item.name,
                description:item.desp
              })
            })
          }else{
            this.tableAllData.dataNull = true
          }

        }
        //that.category = that.categoryOptions[0].value
      })
    },
    //添加分类
    addCategory:function (){
      if(this.submitForm.name === ''){
        tips('error','请填写分类名称')
        return;
      }
      let data = {
        name:this.submitForm.name,
        desp:this.submitForm.description,
        url:''
      }
      addCategory(data).then(res=>{
        if(res.code === 200){
          tips('success','添加分类成功')
          this.cancelModal();
          this.getCategoryList();
        }
      }).catch(()=>{
        tips('error','分类名已存在')
      })
    },
    //修改分类
    updateCategory:function (){
      let data = {
        desp:this.updateForm.description,
        name:this.updateForm.name,
        url:''
      }
      if(this.updateForm.name === ''){
        tips('error','请填写分类名称');
        return;
      }
      updateCategory(this.updateForm.id,data).then(res => {
        if(res.code === 200){
          tips('success','修改分类成功')
          this.cancelModal();
          this.getCategoryList();
        }
      }).catch(()=>{
        tips('error','分类名已存在');
      })
    },
    // 子组件分页通过调用父组件的方法进行调用更新表格
    fatherMethod: function (pageNum, pageSize) {
      this.pageList.pageNum = pageNum;
      this.pageList.pageSize = pageSize;

    }
  },
  mounted() {
    this.getCategoryList();
  }
}
</script>

<style scoped lang="scss">
@import "src/common/scss/common";
.picture {
  width: 146px;
  height: 146px;
  margin-left: 20%;
}
.change-icon{
  @include icon-style(80px, 80px);
  margin: 4%;
}
.button-table-box{
  @include width-margin(90%, 100%);
  margin-top: 15px;
}
</style>
